<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">

          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              router
              @open="handleOpen"
              @close="handleClose">
            <el-submenu index="1" v-for="maun in mauns" :key="maun.id">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ maun.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-for="m in maun.children" :index="m.path" :key="m.id">{{ m.name }}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>

        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "IndexView",
  data() {
    return {
      mauns:[],
    }
  }, methods: {
      list(){
        this.axios.post("http://localhost:9999/menu/list").then(res=>{
          this.mauns=res.data.data;
        })
      }
  }, created() {
    this.list();
  }
}
</script>

<style scoped>

</style>
